<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Selar Protocolo
        </ui:define>

        <ui:define name="content">
            <h:form id="selarProtocoloForm">

                <p:messages id="criarImovelMessages" autoUpdate="true" />

                <p:fieldset styleClass="column12" legend="Protocolo">

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Código:" />
                        </div>                    
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerSelarProtocolo.protocolo.id }" />
                        </div>

                        <div class="column2 bold">
                            <p:outputLabel value="Data do Protocolo:" />
                        </div>
                        <div class="column3 text">
                            <p:outputLabel value="#{ managerSelarProtocolo.protocolo.dataProtocolo }">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </p:outputLabel>
                        </div>
                    </div>                

                    <div class="row">
                        <div class="column2 bold">
                            <p:outputLabel value="Cliente:" />
                        </div>
                        <div class="column9 text">
                            <p:outputLabel value="#{ managerSelarProtocolo.obterInteressado() }" />
                        </div>                    
                    </div>

                </p:fieldset>

                <p:fieldset styleClass="column12" id="servicosProtocoloFieldset" legend="Serviços">

                    <p:dataTable id="protocoloItensDataTable" var="item" value="#{ managerSelarProtocolo.protocoloItens }"
                                 rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ item.id }"
                                 selection="#{ managerSelarProtocolo.protocoloItem }"
                                 emptyMessage="Nenhum serviço adicionado">

                        <p:ajax event="rowSelectRadio" update=":selarProtocoloForm:selosSugeridosFieldset"
                                listener="#{ managerSelarProtocolo.sugirirSelos() }" />

                        <p:column selectionMode="single" width="5%" />

                        <p:column headerText="Ato" width="95%">
                            #{ item.atoItem.descricao }
                        </p:column>

                    </p:dataTable>

                </p:fieldset>

                <p:fieldset styleClass="column12" id="cartorioFieldset" legend="Cartório">
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Livro" for="livroAutoComplete" />
                        </div>
                        <div class="column3">
                            <p:autoComplete id="livroAutoComplete" value="#{ managerSelarProtocolo.livro }"
                                            forceSelection="true" dropdown="true" var="livro" itemValue="#{ livro }"
                                            required="true" requiredMessage="Livro é obrigatório"
                                            itemLabel="#{ livro.titulo }" completeMethod="#{ managerSelarProtocolo.autocompletarLivro }"
                                            converter="conversorlivro" />
                        </div>                        

                        <div class="column2">
                            <p:outputLabel value="Folhas" for="folhasInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="folhasInputText" value="#{ managerSelarProtocolo.folhas }"
                                         required="true" requiredMessage="Folhas é obrigatório"
                                         title="Em caso de mais de uma folha, separe o intervalo com um traço. Exemplo: 1 - 3" />                                
                        </div>
                    </div>
                </p:fieldset>

                <p:fieldset styleClass="column6" id="selosSugeridosFieldset" legend="Selos Sugeridos">

                    <p:dataTable id="selosSugeridosDataTable" var="selo" value="#{ managerSelarProtocolo.selosSugeridos }"
                                 selection="#{ managerSelarProtocolo.selosSelecionados }"
                                 rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ selo.id }"
                                 emptyMessage="Nenhum selo encontrato">                   

                        <p:column selectionMode="multiple" width="5%" />

                        <p:column headerText="Cor" width="20%">
                            <div class="color" style="background: \##{ selo.tipoSelo.corSelo }"></div>
                        </p:column>                       

                        <p:column headerText="Selo" width="35%">
                            #{ selo.tipoSelo.nome }
                        </p:column>                        

                        <p:column headerText="Número" width="20%">
                            #{ selo.numero }
                        </p:column>

                        <p:column headerText="Série" width="20%">
                            #{ selo.serie }
                        </p:column>
                    </p:dataTable>

                </p:fieldset>

                <p:fieldset styleClass="column6" id="selosFieldset" legend="Selos">

                    <div class="row">
                        <div class="column4">
                            <p:outputLabel value="Tipo do Selo" for="tipoSeloAutoComplete" />
                        </div>
                        <div class="column5">
                            <p:autoComplete id="tipoSeloAutoComplete" value="#{ managerSelarProtocolo.selo.tipoSelo }"
                                            forceSelection="true" dropdown="true" var="tipoSelo" itemValue="#{ tipoSelo }" 
                                            itemLabel="#{ tipoSelo.nome }" completeMethod="#{ managerSelarProtocolo.autocompletarTipoSelo }"
                                            converter="conversortiposelo" minQueryLength="3" required="true"
                                            requiredMessage="Tipo do Selo é obrigatório">
                                <p:column>
                                    <div class="color" style="background: \##{ tipoSelo.corSelo }"></div>
                                </p:column>
                                <p:column>#{ tipoSelo.nome }</p:column>
                            </p:autoComplete>                            
                        </div>
                    </div>

                    <div class="row">
                        <div class="column4">
                            <p:outputLabel value="Série" for="serieInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="serieInputText" value="#{ managerSelarProtocolo.selo.serie }"
                                         required="true" requiredMessage="Série é obrigatório" />                            
                        </div>
                    </div>

                    <div class="row">
                        <div class="column4">
                            <p:outputLabel value="Número" for="numeroInputText" />
                        </div>
                        <div class="column5">
                            <p:inputText id="numeroInputText" value="#{ managerSelarProtocolo.selo.numero }"
                                         required="true" requiredMessage="Número é obrigatório"
                                         onkeypress="jQuery(this).autoNumeric({aSep: '', aDec: ',', vMin:0, wEmpty: '0', mDec: 0});">
                            </p:inputText>                            
                        </div>
                    </div>                    

                    <div class="command">
                        <p:commandButton actionListener="#{ managerSelarProtocolo.adicionarSelo() }" value="Adicionar"
                                         oncomplete="widthFix();" update=":selarProtocoloForm:selosFieldset" process=":selarProtocoloForm:selosFieldset"
                                         icon="ui-icon-plus" />
                    </div>

                    <p:dataTable id="selosDataTable" var="selo" value="#{ managerSelarProtocolo.selos }"
                                 rows="5" paginator="true" paginatorPosition="bottom"
                                 emptyMessage="Nenhum selo encontrato">                   

                        <p:column headerText="Cor" width="20%">
                            <div class="color" style="background: \##{ selo.tipoSelo.corSelo }"></div>
                        </p:column>

                        <p:column headerText="Selo" width="35%">
                            #{ selo.tipoSelo.nome }
                        </p:column>

                        <p:column headerText="Número" width="20%">
                            #{ selo.numero }
                        </p:column>

                        <p:column headerText="Série" width="20%">
                            #{ selo.serie }
                        </p:column>
                    </p:dataTable>

                </p:fieldset>
                
                <div class="command">
                    <p:commandButton actionListener="#{ managerSelarProtocolo.adicionarServico() }" value="Adicionar"
                                     oncomplete="widthFix();" update="@form" process="@this, :selarProtocoloForm:servicosProtocoloFieldset, :selarProtocoloForm:selosSugeridosDataTable, :selarProtocoloForm:cartorioFieldset"
                                     icon="ui-icon-plus" />
                </div>
                
                <p:fieldset id="servicosSeladosProtocoloPanel" styleClass="column12" style="margin-top: 20px" legend="Serviços Selos">

                    <p:dataTable id="protocoloItensSeladosDataTable" var="item" value="#{ managerSelarProtocolo.protocoloItensSelados }"
                                 rows="5" paginator="true" paginatorPosition="bottom"
                                 emptyMessage="Todos os serviços foram adicionados">

                        <p:column headerText="Serviço" width="40%">
                            #{ item.atoItem.descricao }
                        </p:column>
                        <p:column headerText="Livro" width="20%">
                            #{ item.livro.titulo }
                        </p:column>
                        <p:column headerText="Folhas" width="10%">
                            #{ item.folhas }
                        </p:column>
                        <p:column headerText="Selos" width="30%">
                            <p:dataTable var="selo" value="#{ item.selos }" styleClass="innerDataTable">
                                <p:column headerText="Selo" width="40%">
                                    #{ selo.tipoSelo.nome }
                                </p:column>                                
                                <p:column headerText="Número" width="30%">
                                    #{ selo.numero }
                                </p:column>
                                <p:column headerText="Série" width="30%">
                                    #{ selo.serie }
                                </p:column>
                            </p:dataTable>
                        </p:column>

                    </p:dataTable>

                </p:fieldset>

                <div class="command">
                    <p:commandButton id="salvarCommandButton" oncomplete="widthFix();"
                                     actionListener="#{ managerSelarProtocolo.salvar() }" value="Selar"
                                     update="@form" process="@this, :selarProtocoloForm:servicosSeladosProtocoloPanel"
                                     icon="ui-icon-disk" />
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarProtocolo.xhtml" />
                </div>                

            </h:form>

            <script type='text/javascript' src='media/js/jquery-ui.js'></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $( document ).tooltip();
                });
            </script>

        </ui:define>
    </ui:composition>

</html>